/// 其他依赖包：例如 material...
import 'ordinary_dropdown_box.dart';

void main() => runApp(MyApp());

// 虚拟的数据
List<Map<String, dynamic>> virtualData = [
  {
    "id": "100001",
    "name": "北京街",
  },
  {
    "id": "100002",
    "name": "天津街",
  },
  {
    "id": "100003",
    "name": "上海街",
  },
  {
    "id": "100004",
    "name": "重庆街",
  }
];

// 辅助完成示例，并非必要
class TestListBean {
  List<TestBean> list;
  TestListBean({this.list});
  TestListBean.fromJson(List<Map<String, dynamic>> json) {
    list = <TestBean>[];
    json.forEach((v) => list.add(TestBean.fromJson(v)));
  }
}

// 辅助完成示例，并非必要
class TestBean {
  String id;
  String name;

  TestBean({this.id, this.name});

  TestBean.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  }
}

// 示例
class MyApp extends StatelessWidget {
  // 数据描述
  // * 可以根据实际情况自定义数据描述
  TestListBean tData = TestListBean.fromJson(virtualData);

  // 选中的数据
  // * 同上
  TestBean selected;

  @override
  Widget build(BuildContext context) {
    // 默认选中的数据，实际开发中请在生命周期函数中赋值
    // 例：请求数据 => 赋值选中的数据 => selected = tData.list[2]
    // selected = tData.list[2];

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("自定义下拉选择框")),
        body: Center(
          child: OrdinaryDropdownBox<TestBean>(
            // 配置
            // `showContent`：列表中需要回显的内容
            // `contrast`：需要对比的值|（注：请保持唯一性）
            reference: OptionBean(showContent: 'name', contrast: 'id'),
            width: 260,
            items: tData.list,
            value: selected,
            // 文字对齐方式|选填
            alignments: ALIGNMENT.LEFT,

            // placeholder String|占位符|选填
            // operIconSize double|右侧icon图标尺寸|选填
            // height double|组件的高度|选填
            // fontSize double|回显的字号|选填
            // decoration Decoration|组件的样式|选填
            // dropDownFontSize double|下拉列表字号|选填
            // selectedFontColor Color|下拉列表中选中文字的样式|选填
            onChange: (TestBean val) =>
                print("被选中的数据是：${val}，返回的数据类型：${TestBean}"),
          ),
        ),
      ),
    );
  }
}
